---
slug: ../DatePicker
---

import Basic from "../../_samples/main/DatePicker/Basic/Basic.md";
import State from "../../_samples/main/DatePicker/State/State.md";
import MinMax from "../../_samples/main/DatePicker/MinMax/MinMax.md";
import CalendarTypes from "../../_samples/main/DatePicker/CalendarTypes/CalendarTypes.md";
import CalendarWeekNumbering from "../../_samples/main/DatePicker/CalendarWeekNumbering/CalendarWeekNumbering.md";
import DatePickerInDifferentTimezone from "../../_samples/main/DatePicker/DatePickerInDifferentTimezone/DatePickerInDifferentTimezone.md";
import CustomFormatting from "../../_samples/main/DatePicker/CustomFormatting/CustomFormatting.md";

<%COMPONENT_OVERVIEW%>

## Basic Sample
<Basic />

<%COMPONENT_METADATA%>

## More Samples

### States
<State />

### Min and Max Dates
Define min and max date boundaries to contrain user choice.

<MinMax />

### Calendar Types
You can set the preferred calendar, such as: Gregorian, Islamic, Japanese and Persian.
<CalendarTypes />

### Timezones
You can set to the configuration the preferred time zone, such as: Asia/Tokyo, Pacific/Apia, Asia/Kolkata, Europe/Sofia and etc.
<DatePickerInDifferentTimezone />

### CalendarWeekNumbering
You can use the component, the preferred week numbering and first day of week.
<CalendarWeekNumbering />

### CustomFormatting
You can have custom formatting for the display value and the value property.
Supported format options are pattern-based on Unicode LDML Date Format notation.
For more information, see <a target="_blank" href="http://unicode.org/reports/tr35/#Date_Field_Symbol_Table">UTS #35: Unicode Locale Data Markup Language</a>.
<CustomFormatting />